/*
 * @Author: 飞越疯人院 353362604@qq.com
 * @Date: 2022-05-24 11:22:38
 * @LastEditors: 飞越疯人院 353362604@qq.com
 * @LastEditTime: 2022-11-01 14:15:17
 * @FilePath: \reconfiguration-administration\src\Common\Mars3D\LeftBox.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Http } from '../Api'
import { FormItemModal } from './Form'
import { useState, useEffect } from 'react'
import { BaseFormData } from './Mars3Config'
import { useBoolean, useEventEmitter, useLocalStorageState, useRequest } from 'ahooks'
import { EditOutlined, DeleteOutlined, FileAddOutlined, PaperClipOutlined } from '@ant-design/icons'
import { AddKML, ModKML, AddMod, ModMod, FunctionList, ElementForm, ElementDetailForm } from './RightBox'
import {
    Form,
    Button,
    message,
    Radio,
    Space,
    Checkbox,
    Popconfirm,
    Tooltip,
    Tree,
    Result,
    Spin,
    InputNumber,
} from 'antd'

const { mars3d } = window

export const LeftBox = ({
    scene,
    TreeSelect,
    Map,
    Gra,
    KMLData,
    ElementsData,
    FilesData,
    newModelEvent,
    initializationEvent,
}) => {
    // 修改基础数据
    const [Scene, setScene] = useState(scene)
    const SceneEvent = useEventEmitter()
    SceneEvent.useSubscription(val => {
        setScene(val)
        initializationEvent.current.reload()
    })

    return (
        <>
            {(() => {
                switch (TreeSelect) {
                    case 0:
                        return <ScenesBaseModal Scene={Scene} Map={Map} SceneEvent={SceneEvent} />
                    case 1:
                        return <BaseMapModal Scene={Scene} Map={Map} SceneEvent={SceneEvent} />
                    case 2:
                        return <KMLModal Scene={Scene} Map={Map} KMLData={KMLData} newModelEvent={newModelEvent} />
                    case 3:
                        return (
                            <ElementModal
                                Scene={Scene}
                                Map={Map}
                                Gra={Gra}
                                ElementsData={ElementsData}
                                newModelEvent={newModelEvent}
                            />
                        )
                    case 4:
                        return (
                            <ModelModal Scene={Scene} Map={Map} FilesData={FilesData} newModelEvent={newModelEvent} />
                        )
                    case 5:
                        return <CenterModal Scene={Scene} Map={Map} Gra={Gra} SceneEvent={SceneEvent} />
                    default:
                        return false
                }
            })()}
        </>
    )
}

// 基础数据
const ScenesBaseModal = ({ Scene, Map, SceneEvent }) => {
    const [Cache] = useLocalStorageState('ClientData')
    const [parameter, setParameter] = useState(BaseFormData)
    const [form] = Form.useForm()
    useEffect(() => {
        form.setFieldsValue(Scene)

        Object.keys(Cache.dictionaryType).forEach(key => {
            if (Cache.dictionaryType[key] === '坐标系') {
                let select = {}
                Object.values(Cache.dictionary[key]).forEach(item => (select = { ...select, [item]: item }))
                BaseFormData.find(v => v.name === 'coordinateSystems').select = select
            }
        })
        setParameter([...BaseFormData])
    }, [form, Scene, Cache])

    const { run } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            message.success('场景数据修改成功!')
            SceneEvent.emit(res)
        },
    })
    return (
        <div className="treeList animate__animated  animate__slideInLeft">
            <Form
                className="scenesBase"
                form={form}
                layout="vertical"
                onFinish={data => {
                    if (typeof data.center !== 'string') data.center = JSON.stringify(data.center)
                    run({ url: `putScenes`, data, path: [data.uuid] })
                }}
            >
                <FormItemModal Map={Map} data={parameter} form={form} />
                <div className="options">
                    <Button block type="primary" onClick={() => form.submit()}>
                        保存数据
                    </Button>
                </div>
            </Form>
        </div>
    )
}

// 地图底图
const BaseMapModal = ({ Scene, Map, SceneEvent }) => {
    const [basemapsData, setBasemapsData] = useState(1)
    const [layersData, setLayersData] = useState([])
    const [basemapsList, setBasemapsList] = useState([])
    const [layersList, setLayersList] = useState([])
    const [layerCheck, setLayerCheck] = useState([])
    useEffect(() => {
        let basemapsObj = []
        let layersObj = []
        let layersChe = []
        const { basemaps, layers } = Scene
        if (basemaps) setBasemapsData(typeof basemaps === 'string' ? JSON.parse(basemaps) : basemaps)
        if (layers) setLayersData(typeof layers === 'string' ? JSON.parse(layers) : layers)
        Map.getLayers({ basemaps: true }).forEach(item => {
            if (item.id < 100 && item.pid === -1) basemapsObj = [...basemapsObj, item]
        })
        Map.getLayers({ layers: true }).forEach(item => {
            if (item.id > 100) {
                layersObj = [...layersObj, item]
                layersChe = [...layersChe, { label: item.options.name, value: item.options.id }]
            }
        })
        setBasemapsList(basemapsObj)
        setLayersList(layersObj)
        setLayerCheck(layersChe)
    }, [Scene, Map])
    // 底图选择
    const basemapsSelect = e => {
        setBasemapsData(e.target.value)
        basemapsList.forEach(item => Map.removeLayer(item, false))
        Map.addLayer(
            basemapsList.find(v => v.options.id === e.target.value),
            true,
        )
        Scene.basemaps = JSON.stringify(e.target.value)
        run({ url: `putScenes`, data: Scene, path: [Scene.uuid] })
    }
    // 辅助选择
    const layersSelect = e => {
        setLayersData(e)
        layersList.forEach(item => Map.removeLayer(item, false))
        e.forEach(item =>
            Map.addLayer(
                layersList.find(v => v.id === item),
                true,
            ),
        )
        Scene.layers = JSON.stringify(e)
        run({ url: `putScenes`, data: Scene, path: [Scene.uuid] })
    }
    const { run } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            message.success('地图数据修改成功!')
            SceneEvent.emit(res)
        },
    })
    return (
        <div className="treeList animate__animated  animate__slideInLeft">
            <div className="basemaps">
                <div>底图</div>
                <div>
                    <Radio.Group value={basemapsData} onChange={basemapsSelect}>
                        <Space direction="vertical">
                            {basemapsList.map(item => (
                                <Radio key={`basemapsRadio${item.uuid}`} value={item.options.id}>
                                    {item.options.name}
                                </Radio>
                            ))}
                        </Space>
                    </Radio.Group>
                </div>
            </div>
            <div className="layers">
                <div>注记</div>
                <div>
                    <Checkbox.Group value={layersData} options={layerCheck} onChange={layersSelect} />
                </div>
            </div>
        </div>
    )
}

// KML 数据
const KMLModal = ({ Scene, Map, KMLData, newModelEvent }) => {
    const [addKML, { setTrue: addTrue, setFalse: addFalse }] = useBoolean(false) // 添加KML状态
    const [modKML, { setTrue: modTrue, setFalse: modFalse }] = useBoolean(false) // 修改KML状态
    const [addCli, { setTrue: addCliTrue, setFalse: addCliFalse }] = useBoolean(false) // 添加点击事件
    const [loading, { setTrue: loadTrue, setFalse: loadFalse }] = useBoolean(false) // 左侧菜单栏状态
    const [KMLModifyData, setKMLModifyData] = useState({}) // KML数据
    const [ClickData, setClickData] = useState({}) // 事件数据
    const off = () => {
        addFalse()
        modFalse()
        addCliFalse()
        loadFalse()
        setKMLModifyData({})
        setClickData({})
    }
    // 树形参数
    const [TreeDataDefault, setTreeDataDefault] = useState([])
    const [TreeData, setTreeData] = useState([])
    const { run: putScenesDetails } = useRequest(Http, {
        manual: true,
        onSuccess: () => {
            message.success('场景明细修改成功!')
            newModelEvent.emit()
        },
    })
    useEffect(() => {
        let data = []
        KMLData.forEach(item => {
            if (Number(item.isEnabled)) data = [...data, item.scenesDetailsUuid]
        })
        setTreeDataDefault(data)
        setTreeData(KMLData)
    }, [KMLData])
    // 切换KML状态
    const SwitchState = (checkedKeys, { node }) => {
        setTreeDataDefault(checkedKeys)
        const { sortId, tableName, elementUuid, scenesDetailsUuid, checked } = node
        Map.getLayerById(elementUuid).show = !checked
        const data = {
            sortId,
            isEnabled: checked ? 0 : 1,
            tableName,
            category: 'Elements',
            constitutesUuid: elementUuid,
            scenesUuid: Scene.uuid,
            uuid: scenesDetailsUuid,
        }
        putScenesDetails({ url: `putScenesDetails`, data, path: [scenesDetailsUuid] })
    }
    // 修改KML样式
    const ModifyKML = e => {
        off()
        loadTrue()
        setKMLModifyData(e)
        modTrue()
    }
    // 删除KML
    const { runAsync: delSceneDetails } = useRequest(Http, { manual: true })
    const DeleteKML = e => {
        delSceneDetails({ url: `delScenesDetails`, path: [e.scenesDetailsUuid] }).then(() => {
            Map.removeLayer(e.elementUuid)
            message.success('KML删除成功')
            newModelEvent.emit()
        })
    }
    // 添加点击事件
    const AddClickFun = e => {
        off()
        loadTrue()
        addCliTrue()
        setClickData({ ConstitutesUuid: e.elementUuid, Category: 2, tableName: e.tableName })
    }
    // kml 元素uuid
    return (
        <>
            <div className="treeList animate__animated  animate__slideInLeft">
                <Spin spinning={loading}>
                    <div className="ElementBtnBox">
                        <Button
                            icon={<FileAddOutlined />}
                            block
                            type="primary"
                            onClick={() => {
                                addTrue()
                                loadTrue()
                            }}
                        >
                            导入KML
                        </Button>
                    </div>
                    {TreeData.length !== 0 ? (
                        <Tree
                            className="treeBox"
                            showLine
                            defaultExpandAll
                            checkable
                            checkedKeys={TreeDataDefault}
                            onCheck={SwitchState}
                            onSelect={(_, { node }) => Map.centerAt(node.center)}
                            fieldNames={{ key: 'scenesDetailsUuid' }}
                            treeData={TreeData}
                            titleRender={e => (
                                <div className="TreeItem">
                                    <div>{e.tableName}</div>
                                    <div>
                                        <Tooltip title="事件列表" onClick={() => AddClickFun(e)}>
                                            <PaperClipOutlined />
                                        </Tooltip>
                                        <Tooltip title="修改KML" onClick={() => ModifyKML(e)}>
                                            <EditOutlined />
                                        </Tooltip>
                                        <Popconfirm
                                            title="是否要删除当前KML数据?"
                                            okText="删除"
                                            cancelText="取消"
                                            onConfirm={() => DeleteKML(e)}
                                        >
                                            <Tooltip title="删除">
                                                <DeleteOutlined />
                                            </Tooltip>
                                        </Popconfirm>
                                    </div>
                                </div>
                            )}
                        />
                    ) : (
                        <Result status="404" title="没有数据" subTitle="抱歉, 当前场景还未配置KML信息!" />
                    )}
                </Spin>
            </div>
            {addKML && <AddKML off={off} Map={Map} newModelEvent={newModelEvent} ScenesUuid={Scene.uuid} />}
            {modKML && (
                <ModKML
                    off={off}
                    Map={Map}
                    newModelEvent={newModelEvent}
                    ScenesUuid={Scene.uuid}
                    KMLModifyData={KMLModifyData}
                />
            )}
            {addCli && <FunctionList off={off} ClickData={ClickData} />}
        </>
    )
}

// 元素数据
const ElementModal = ({ Scene, Map, Gra, ElementsData, newModelEvent }) => {
    const [eleKML, { setTrue: eleTrue, setFalse: eleFalse }] = useBoolean(false) // 添加状态
    const [detKML, { setTrue: detTrue, setFalse: detFalse }] = useBoolean(false) // 修改状态
    const [addCli, { setTrue: addCliTrue, setFalse: addCliFalse }] = useBoolean(false) // 添加点击事件
    const [loading, { setTrue: loadTrue, setFalse: loadFalse }] = useBoolean(false) // 左侧菜单栏状态
    const [ClickData, setClickData] = useState({}) // 事件数据
    const off = () => {
        eleFalse()
        detFalse()
        loadFalse()
        addCliFalse()
        setEleModifyData({})
        setDetModifyData({})
        setClickData({})
    }

    const [EleModifyData, setEleModifyData] = useState({})
    const [DetModifyData, setDetModifyData] = useState({})

    const [TreeDataDefault, setTreeDataDefault] = useState([])
    const [TreeData, setTreeData] = useState([])
    // api
    // 修改元素表显示隐藏
    const { run: patElementsIsEnabled } = useRequest(Http, {
        manual: true,
        onSuccess: (_, res) => {
            const { path, data } = res[0]
            const [uuid, state] = path
            const ElementsDetailsArr = TreeData.find(v => v.elementUuid === uuid).elementDetails
            ElementsDetailsArr.forEach(({ uuid }) => (Gra.getGraphicById(uuid).show = state))
            setTreeDataDefault(data.checkedKeys)
            message.success(`元素 ${state ? '显示' : '隐藏'} 成功`)
            newModelEvent.emit()
        },
    })
    // 修改元素明细显示隐藏
    const { run: putElementDetails } = useRequest(Http, {
        manual: true,
        onSuccess: (_, res) => {
            const { data, path } = res[0]
            const [uuid, state] = path
            Gra.getGraphicById(uuid).show = state
            setTreeDataDefault(data.checkedKeys)
            message.success(`元素 ${state ? '显示' : '隐藏'} 成功`)
            newModelEvent.emit()
        },
    })
    // 删除场景
    const { runAsync: delSceneDetails } = useRequest(Http, { manual: true })
    // 删除元素明细
    const { runAsync: delElementDetails } = useRequest(Http, { manual: true })
    // 初始化表单数据
    useEffect(() => {
        let data = JSON.parse(
            JSON.stringify(ElementsData)
                .replace(/scenesDetailsUuid/g, 'uuid')
                .replace(/elementDetailUuid/g, 'uuid'),
        )
        setTreeData(data)
        let defaultData = []
        data.forEach(item => {
            const { elementDetails } = item
            if (elementDetails.length !== 0)
                elementDetails.forEach(key => {
                    if (key.isEnabled) defaultData = [...defaultData, key.uuid]
                })
            setTreeDataDefault(defaultData)
        })
    }, [ElementsData])
    // 切换元素状态
    const SwitchState = (checkedKeys, e) => {
        const { node, checked } = e
        if (node.elementDetails) {
            const { elementUuid } = node
            patElementsIsEnabled({
                url: `patElementsIsEnabled`,
                data: { checkedKeys },
                path: [elementUuid, checked ? 1 : 0],
            })
        } else {
            const { uuid } = node
            node.elementsUuid = node.elementUuid
            node.center = JSON.stringify(node.center)
            node.position = JSON.stringify(node.position)
            node.isEnabled = checked ? 1 : 0
            putElementDetails({
                url: `putElementDetails`,
                data: { ...node, checkedKeys },
                path: [uuid, checked ? 1 : 0],
            })
        }
    }

    // 修改元素明细
    const modifyElement = e => {
        if (e.elementDetails) {
            off()
            setEleModifyData(e)
            eleTrue()
            loadTrue()
        } else {
            TreeData.forEach(item => {
                if (item.elementDetails.some(v => v.uuid === e.uuid)) {
                    off()
                    setEleModifyData(item)
                    setDetModifyData(e)
                    detTrue()
                    loadTrue()
                }
            })
        }
    }

    // 删除元素
    const deleteElement = e => {
        if (e.elementType) {
            delSceneDetails({ url: `delScenesDetails`, path: [e.uuid] }).then(() => {
                message.success('元素删除成功')
                newModelEvent.emit()
            })
        } else {
            delElementDetails({ url: `delElementDetails`, path: [e.uuid] }).then(() => {
                Gra.removeGraphic(Gra.getGraphicById(e.uuid), true)
                message.success('元素明细删除成功')
                newModelEvent.emit()
            })
        }
    }

    // 添加元素明细
    const addElementDetail = e => {
        off()
        setEleModifyData(e)
        detTrue()
        loadTrue()
    }

    // 添加点击事件
    const AddClickFun = e => {
        off()
        loadTrue()
        setClickData({ ConstitutesUuid: e.uuid, Category: 2, tableName: e.tableName })
        addCliTrue()
    }

    return (
        <>
            <div className="treeList animate__animated  animate__slideInLeft">
                <Spin spinning={loading}>
                    <div className="ElementBtnBox">
                        <Button
                            icon={<FileAddOutlined />}
                            type="primary"
                            block
                            onClick={() => {
                                eleTrue()
                                loadTrue()
                            }}
                        >
                            新增元素
                        </Button>
                    </div>
                    {TreeData.length !== 0 ? (
                        <Tree
                            className="treeBox"
                            showLine
                            checkable
                            checkedKeys={TreeDataDefault}
                            onCheck={SwitchState}
                            onSelect={(_, { node }) =>
                                Map.centerAt(typeof node.center === 'string' ? JSON.parse(node.center) : node.center)
                            }
                            treeData={TreeData}
                            fieldNames={{ key: 'uuid', children: 'elementDetails' }}
                            titleRender={e => (
                                <div className="TreeItem">
                                    <div>{e.tableName}</div>
                                    <div>
                                        {e.elementDetails ? (
                                            <Tooltip title="新增" onClick={() => addElementDetail(e)}>
                                                <FileAddOutlined />
                                            </Tooltip>
                                        ) : (
                                            <Tooltip title="事件列表" onClick={() => AddClickFun(e)}>
                                                <PaperClipOutlined />
                                            </Tooltip>
                                        )}
                                        <Tooltip title="修改" onClick={() => modifyElement(e)}>
                                            <EditOutlined />
                                        </Tooltip>
                                        {(e.elementDetails?.length === 0 || !e.elementDetails) && (
                                            <Popconfirm
                                                title="是否要删除当前元素?"
                                                onConfirm={() => deleteElement(e)}
                                                okText="删除"
                                                cancelText="取消"
                                            >
                                                <Tooltip title="删除">
                                                    <DeleteOutlined />
                                                </Tooltip>
                                            </Popconfirm>
                                        )}
                                    </div>
                                </div>
                            )}
                        />
                    ) : (
                        <Result status="404" title="没有数据" subTitle="抱歉, 当前场景还未配置元素信息!" />
                    )}
                </Spin>
            </div>
            {eleKML && (
                <ElementForm
                    off={off}
                    Map={Map}
                    Gra={Gra}
                    newModelEvent={newModelEvent}
                    ScenesUuid={Scene.uuid}
                    EleModifyData={EleModifyData}
                />
            )}
            {detKML && (
                <ElementDetailForm
                    off={off}
                    Map={Map}
                    Gra={Gra}
                    newModelEvent={newModelEvent}
                    EleModifyData={EleModifyData}
                    DetModifyData={DetModifyData}
                />
            )}
            {addCli && <FunctionList off={off} ClickData={ClickData} />}
        </>
    )
}
// 模型数据
const ModelModal = ({ Scene, Map, FilesData, newModelEvent }) => {
    const [addMOD, { setTrue: addTrue, setFalse: addFalse }] = useBoolean(false) // 添加模型状态
    const [modMOD, { setTrue: modTrue, setFalse: modFalse }] = useBoolean(false) // 修改模型状态
    const [addCli, { setTrue: addCliTrue, setFalse: addCliFalse }] = useBoolean(false) // 添加点击事件
    const [loading, { setTrue: loadTrue, setFalse: loadFalse }] = useBoolean(false) // 左侧菜单栏状态
    const [ClickData, setClickData] = useState({}) // 事件数据
    const off = () => {
        addFalse()
        modFalse()
        loadFalse()
        addCliFalse()
        setClickData({})
        setModelModifyData({})
    }
    const [ModelModifyData, setModelModifyData] = useState({})
    const [TreeDataDefault, setTreeDataDefault] = useState([])
    const [TreeData, setTreeData] = useState([])
    useEffect(() => {
        let data = []
        FilesData.forEach(item => {
            if (Number(item.isEnabled)) data = [...data, item.scenesDetailsUuid]
        })
        setTreeDataDefault(data)
        setTreeData(FilesData)
    }, [FilesData])
    // 启用禁用
    const { run: putScenesDetails } = useRequest(Http, {
        manual: true,
        onSuccess: (_, res) => {
            if (res[0].data.isEnabled === 0) message.info('模型隐藏成功')
            else message.success('模型显示成功')
            newModelEvent.emit()
        },
    })
    const SwitchState = (checkedKeys, { node }) => {
        setTreeDataDefault(checkedKeys)
        const { scenesDetailsUuid, checked, center, rotate } = node
        Map.getLayerById(scenesDetailsUuid).show = !checked
        node.center = JSON.stringify(center)
        node.rotate = JSON.stringify(rotate)
        node.isEnabled = checked ? 0 : 1
        node.uuid = node.scenesDetailsUuid
        node.scenesUuid = Scene.uuid
        putScenesDetails({ url: `putScenesDetails`, data: node, path: [node.scenesDetailsUuid] })
    }

    // 修改模型
    const ModifyModel = e => {
        off()
        setModelModifyData(e)
        loadTrue()
        modTrue()
    }
    // 删除模型
    const { runAsync: delScenesDetails } = useRequest(Http, { manual: true })
    const DeleteMOdel = e => {
        delScenesDetails({ url: `delScenesDetails`, path: [e.scenesDetailsUuid] }).then(() => {
            message.success('模型删除成功')
            Map.removeLayer(e.scenesDetailsUuid)
            newModelEvent.emit()
        })
    }

    // 添加点击事件
    const AddClickFun = e => {
        off()
        loadTrue()
        addCliTrue()
        setClickData({ ConstitutesUuid: e.scenesDetailsUuid, Category: 0, tableName: e.tableName })
    }
    return (
        <>
            <div className="treeList animate__animated  animate__slideInLeft">
                <Spin spinning={loading}>
                    <div className="ElementBtnBox">
                        <Button
                            icon={<FileAddOutlined />}
                            block
                            type="primary"
                            onClick={() => {
                                addTrue()
                                loadTrue()
                            }}
                        >
                            添加模型
                        </Button>
                    </div>
                    {TreeData.length !== 0 ? (
                        <Tree
                            className="treeBox"
                            showLine
                            defaultExpandAll
                            checkable
                            checkedKeys={TreeDataDefault}
                            onCheck={SwitchState}
                            onSelect={(_, { node }) => Map.centerAt(node.center)}
                            fieldNames={{ key: 'scenesDetailsUuid' }}
                            treeData={TreeData}
                            titleRender={e => (
                                <div className="TreeItem">
                                    <div>{e.tableName}</div>
                                    <div>
                                        <Tooltip title="新增" onClick={() => AddClickFun(e)}>
                                            <PaperClipOutlined />
                                        </Tooltip>
                                        <Tooltip title="修改" onClick={() => ModifyModel(e)}>
                                            <EditOutlined />
                                        </Tooltip>
                                        {(e.children?.length === 0 || !e.children) && (
                                            <Popconfirm
                                                title="是否要删除当前模型?"
                                                onConfirm={() => DeleteMOdel(e)}
                                                okText="删除"
                                                cancelText="取消"
                                            >
                                                <Tooltip title="删除">
                                                    <DeleteOutlined />
                                                </Tooltip>
                                            </Popconfirm>
                                        )}
                                    </div>
                                </div>
                            )}
                        />
                    ) : (
                        <Result status="404" title="没有数据" subTitle="抱歉, 当前场景还未配置模型信息!" />
                    )}
                </Spin>
            </div>
            {addMOD && <AddMod off={off} Map={Map} newModelEvent={newModelEvent} ScenesUuid={Scene.uuid} />}
            {modMOD && (
                <ModMod
                    off={off}
                    Map={Map}
                    newModelEvent={newModelEvent}
                    ScenesUuid={Scene.uuid}
                    ModelModifyData={ModelModifyData}
                />
            )}
            {addCli && <FunctionList off={off} ClickData={ClickData} />}
        </>
    )
}
// 视角数据
const CenterModal = ({ Gra }) => {
    const [position, setPosition] = useState([126, 45, 0])
    const [pointEntity, setPointEntity] = useState()
    return (
        <div className="treeList animate__animated  animate__slideInLeft">
            <div className="getPosition">
                <div className="label">
                    <div>经度 : </div>
                    <InputNumber
                        style={{ width: 200 }}
                        value={position[0]}
                        onChange={e => {
                            let data = [...position]
                            data[0] = e
                            setPosition(data)
                        }}
                    />
                </div>
                <div className="label">
                    <div>纬度 : </div>
                    <InputNumber
                        style={{ width: 200 }}
                        value={position[1]}
                        onChange={e => {
                            let data = [...position]
                            data[1] = e
                            setPosition(data)
                        }}
                    />
                </div>
                <div className="button">
                    <Button
                        type="primary"
                        onClick={() => {
                            if (!pointEntity) {
                                console.log(1)
                                const data = new mars3d.graphic.PointEntity({
                                    position,
                                    style: {
                                        color: '#3388ff',
                                        pixelSize: 10,
                                        outlineColor: '#ffffff',
                                        outlineWidth: 2,
                                        clampToGround: true,
                                        visibleDepth: false,
                                    },
                                })
                                Gra.addGraphic(data)
                                setPointEntity(data)
                                data.flyTo({ radius: 1000 })
                            } else {
                                pointEntity.position = position
                                setPointEntity({ ...pointEntity })
                                pointEntity.flyTo({ radius: 1000 })
                            }
                        }}
                    >
                        定位
                    </Button>
                </div>
            </div>
        </div>
    )
}
